<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2、AngularJS的指令和表达式</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

  <p>AngularJS 使用 表达式 把数据绑定到 HTML</p>
  <p>AngularJS 表达式写在双大括号内：{{ expression }}。</p>
  <p> AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。</p>
  <p> AngularJS 将在表达式书写的位置"输出"数据。</p>
  <p>AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。</p>


   <!--<div>1、AngularJS 对象  </div>-->
   <!--<div ng-app="" ng-init="person ={name : '子彬', age: 25}">-->
       <!--<p>我的名字是{{person.name}}</p>-->
   <!--</div>-->


   <!--<div>2、AngularJS 数组  </div>-->
   <!--<div ng-app="" ng-init="array = [1,2,3,4,5]">-->
       <!--<p>我的名字是{{array[3]}}</p>-->
   <!--</div>-->


   <!--<div>3、AngularJS 字符串  </div>-->
   <!--<div ng-app="" ng-init="firstName='第一个名字';lastName='后缀名字'">-->
   <!--<p>我的名字是{{firstName + lastName}}</p>-->
   <!--</div>-->


   <!--<div>4、AngularJS数字  </div>-->
   <!--<div ng-app="" ng-init="firstName= 1;lastName= 4">-->
       <!--<p>我的名字是{{firstName + lastName}}</p>-->
   <!--</div>-->

   <!--<div>5、数据绑定  </div>-->
    <!--<div ng-app="" ng-init="price=0.5;count=2">-->
         <!--<p>价格计算器</p>-->
         <!--<p>价格：<input type="number" ng-model="price"></input></p>-->
         <!--<p>数量：<input type="number" ng-model="count"></input></p>-->
         <!--<p>计算结果{{price * count}}</p>-->
    <!--</div>-->

    <!--<div>6、ng-repeat 指令会重复一个 HTML 元素：  </div>-->
    <!--<div ng-app="" ng-init="persons = [-->
    <!--{name: '王宝强',country:'四川'},-->
    <!--{name: '马云',country:'浙江'},-->
    <!--{name: '百度',country:'北京'},]">-->
        <!--<p>循环对象:</p>-->
        <!--<ul>-->
            <!--<li ng-repeat="x in persons">{{x.name + '是' + x.country + '的人'}}</li>-->
        <!--</ul>-->
        <!---->
    <!--</div>-->

   <!--<div ng-app="testApp">7.使用 .directive 函数来添加自定义的指令-->

        <!--&lt;!&ndash;属性调用&ndash;&gt;-->
       <!--<p test-zbdirective></p>-->
       <!--&lt;!&ndash;元素调用&ndash;&gt;-->
       <!--<test-zbdirective></test-zbdirective>-->
       <!--&lt;!&ndash;类名调用&ndash;&gt;-->
       <!--<div class="test-zbdirective"></div>-->

       <!--<script>-->
           <!--var app = angular.module('testApp',[]);-->
           <!--app.directive('testZbdirective',function () {-->
               <!--return {-->
                   <!--restrict:"ACME",-->
                   <!--// E 作为元素名使用-->
                   <!--// A 作为属性使用-->
                   <!--// C 作为类名使用-->
                   <!--// M 作为注释使用-->
                   <!--//restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令-->
                   <!--template:"<h1>我是testDirective自定义指令!</h1>"-->
               <!--};-->
           <!--});-->
       <!--</script>-->
   <!--</div>-->


   <!--8.ng-model 的状态值nvalid, dirty, touched, error-->
  <!--ng-invalid:未通过验证的表单-->
  <!--ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true-->
  <!--ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过-->
  <!--ng-touched:布尔值属性，表示用户是否和控件进行过交互-->
  <!--ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过-->
  <!--ng-valid: 验证通过-->
  <!--ng-invalid: 验证失败-->
  <!--ng-valid-[key]: 由$setValidity添加的所有验证通过的值-->
  <!--ng-invalid-[key]: 由$setValidity添加的所有验证失败的值-->
  <!--ng-pristine: 控件为初始状态-->
  <!--ng-dirty: 控件输入值已变更-->
  <!--ng-touched: 控件已失去焦点-->
  <!--ng-untouched: 控件未失去焦点-->
  <!--ng-pending: 任何为满足$asyncValidators的情况-->
   <div ng-app>
       <form name="myForm">
           邮箱：
           <input type="email " name="myAddress" ng-model="nameValue" required>
           <span ng-show="myForm.myAddress.$error.email">这不是一个合法的邮箱地址</span>
           <h1>状态{{nameValue}}</h1>
           <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
           <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
           <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true) 。</p>

       </form>

   </div>




</body>
</html>